import React from 'react';
import {
  Card,
  Form,
  Input,
  Select,
  DatePicker,
  Button,
  Space,
  FormInstance,
  Row,
  Col
} from 'antd';
import {
  SearchOutlined,
  ReloadOutlined
} from '@ant-design/icons';

const { RangePicker } = DatePicker;
const { Option } = Select;

// 搜索字段类型
export type SearchFieldType = 'input' | 'select' | 'dateRange';

// 搜索字段配置
export interface SearchFieldConfig {
  name: string;
  label?: string;
  placeholder?: string;
  type: SearchFieldType;
  options?: Array<{ label: string; value: string | number }>;
  width?: number;
  allowClear?: boolean;
  prefix?: React.ReactNode;
  span?: number; // 响应式列宽
}

// 组件Props
export interface SearchFormProps {
  fields: SearchFieldConfig[];
  form: FormInstance;
  onSearch: () => void;
  onReset: () => void;
  loading?: boolean;
  className?: string;
}

const SearchForm: React.FC<SearchFormProps> = ({
  fields,
  form,
  onSearch,
  onReset,
  loading = false,
  className = ''
}) => {
  // 渲染不同类型的表单控件
  const renderFormItem = (field: SearchFieldConfig) => {
    const commonProps = {
      placeholder: field.placeholder,
      style: { 
        width: '100%',
        height: '36px' // 统一高度
      },
      allowClear: field.allowClear !== false,
    };

    switch (field.type) {
      case 'input':
        return (
          <Input
            {...commonProps}
            prefix={field.prefix}
          />
        );

      case 'select':
        return (
          <Select {...commonProps}>
            {field.options?.map(option => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        );

      case 'dateRange':
        return (
          <RangePicker
            {...commonProps}
            placeholder={field.placeholder ? [field.placeholder, field.placeholder] : ['开始日期', '结束日期']}
          />
        );

      default:
        return null;
    }
  };

  // 计算字段的列宽
  const getColSpan = (field: SearchFieldConfig) => {
    if (field.span) return field.span;
    
    // 根据字段类型和宽度自动计算列宽
    if (field.type === 'dateRange') return 8; // 日期范围较宽
    if (field.width && field.width > 160) return 6;
    if (field.width && field.width <= 120) return 4;
    return 5; // 默认列宽
  };

  return (
    <Card 
      className={`search-form-card ${className}`}
      bodyStyle={{ padding: '20px 24px' }}
    >
      <Form form={form} className="search-form">
        <Row gutter={[16, 16]} justify="space-between" align="bottom">
          {/* 搜索字段区域 */}
          <Col span={20}>
            <Row gutter={[16, 16]} align="middle">
              {fields.map((field) => (
                <Col
                  key={field.name}
                  xs={24}
                  sm={12}
                  md={getColSpan(field)}
                  lg={getColSpan(field)}
                  xl={getColSpan(field)}
                >
                  <Form.Item 
                    name={field.name} 
                    className="mb-0"
                    label={field.label}
                  >
                    {renderFormItem(field)}
                  </Form.Item>
                </Col>
              ))}
            </Row>
          </Col>
          
          {/* 按钮区域 - 固定在右下角同一行 */}
          <Col span={4}>
            <div className="search-buttons-container" style={{ textAlign: 'right' }}>
              <Space size={8}>
                <Button 
                  icon={<ReloadOutlined />} 
                  onClick={onReset}
                  disabled={loading}
                  className="reset-btn-original"
                  size="middle"
                >
                  重置
                </Button>
                <Button 
                  type="primary" 
                  icon={<SearchOutlined />} 
                  onClick={onSearch}
                  loading={loading}
                  className="search-btn-original"
                  size="middle"
                >
                  搜索
                </Button>
              </Space>
            </div>
          </Col>
        </Row>
      </Form>
    </Card>
  );
};

export default SearchForm; 